<script lang="ts" setup>
// 左侧组件
import importTmpl from '@/components/importTmpl.vue';
import fontStyle from '@/components/fontStyle.vue';
import myMaterial from '@/components/myMaterial/index.vue';
import tools from '@/components/tools.vue';
import material from '@/components/material.vue';
import layer from '@/components/layer.vue';
import { useI18n } from 'vue-i18n';
// 路由
import { useRoute } from 'vue-router';

const { t } = useI18n();

const state = reactive({
  menuActive: 1,
  toolsBarShow: true,
});
// 左侧菜单渲染
const menuActive = ref('importTmpl');
const leftBarComponent = {
  importTmpl,
  tools,
  material,
  fontStyle,
  layer,
  myMaterial,
};

// fix: 修复vue-i18n function "t" not reactive inside ref object
// https://github.com/intlify/vue-i18n/issues/1396#issuecomment-1716123143
const leftBar = reactive([
  {
    //模板
    key: 'importTmpl',
    name: computed(() => t('templates')),
    icon: 'md-book',
  },
  {
    //基础元素
    key: 'tools',
    name: computed(() => t('elements')),
    icon: 'md-images',
  },
  {
    //字体样式
    key: 'fontStyle',
    name: computed(() => t('font_style')),
    icon: 'ios-pulse',
  },
  {
    // 图片元素
    key: 'material',
    name: computed(() => t('material.cartoon')),
    icon: 'ios-leaf-outline',
  },
  {
    // 图层
    key: 'layer',
    name: computed(() => t('layers')),
    icon: 'md-reorder',
  },
  {
    // 用户素材
    key: 'myMaterial',
    name: computed(() => t('mine')),
    icon: 'ios-contact-outline',
  },
]);
// 隐藏工具条
const hideToolsBar = () => {
  state.toolsBarShow = !state.toolsBarShow;
};
// 展示工具条
const showToolsBar = (val) => {
  menuActive.value = val;
  state.toolsBarShow = true;
};

onMounted(() => {
  // 有ID时，打开作品面板
  const route = useRoute();
  if (route?.query?.id) {
    menuActive.value = 'myMaterial';
  }
});
</script>

<template>
  <div :class="`left-bar ${state.toolsBarShow && 'show-tools-bar'}`">
    <!-- 左侧菜单 -->
    <Menu :active-name="menuActive" accordion @on-select="showToolsBar" width="65px">
      <MenuItem v-for="item in leftBar" :key="item.key" :name="item.key" class="menu-item">
        <Icon :type="item.icon" size="24" />
        <div>{{ item.name }}</div>
      </MenuItem>
    </Menu>
    <!-- 左侧组件 -->
    <div class="content" v-show="state.toolsBarShow">
      <div class="left-panel">
        <KeepAlive>
          <component :is="leftBarComponent[menuActive]"></component>
        </KeepAlive>
      </div>
    </div>
    <!-- 关闭按钮 -->
    <div
      :class="`close-btn left-btn ${state.toolsBarShow && 'left-btn-open'}`"
      @click="hideToolsBar"
    ></div>
  </div>
</template>

<style lang="less" scoped>
// 左侧容器
.left-bar {
  width: 65px;
  height: 100%;
  background: #fff;
  display: flex;
  position: relative;

  &.show-tools-bar {
    width: 380px;
  }
}
.ivu-menu-vertical .menu-item {
  text-align: center;
  padding: 10px 2px;
  box-sizing: border-box;
  font-size: 12px;

  & > i {
    margin: 0;
  }
}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
  background: none;
}

.content {
  flex: 1;
  width: 220px;
  padding: 0 10px;
  height: 100%;
  overflow-y: auto;
}

// 关闭按钮
.close-btn {
  width: 20px;
  height: 64px;
  cursor: pointer;
  background-image: url();
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  position: absolute;
  right: -20px;
  z-index: 1;
  top: 50%;
  margin-top: -10px;

  &.left-btn {
    background-image: url();
  }

  &.left-btn-open {
    background-image: url();
    transform: rotateY(360deg);
  }
}
</style>
